<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="easyui_mergecell.js"></script>
	<script>
		$(function(){
			var sortFlag = false;
				$('#simpleDgId').datagrid({
					url:"datagrid_data1.json",
					fitColumns:true,
					singleSelect:true,
					remoteSort: false,
					columns:[[
							  {field:"itemid",title:"明细ID",width:25,align:'center',sortable:true},
							  {field:"productid",title:"产品ID",width:25,align:'center',sortable:true},
							  {field:"listprice",title:"价格",width:25,align:'center',sortable:true},
							  {field:"unitcost",title:"消费",width:25,align:'center',sortable:true},
							  {field:"attr1",title:"属性",width:25,align:'center',sortable:true},
							  {field:"status",title:"状态",width:25,align:'center',sortable:true}
					]],
					onSortColumn:function(sort, order){
						sortFlag = true;
						if("userName"==sort){
							$(this).datagrid("autoMergeCells",[sort]);
						}else{
							$(this).datagrid("autoMergeCells");
						}
					},
					onLoadSuccess: function(data){
						if(!sortFlag) $(this).datagrid("autoMergeCells",['unitcost']);
					}
				});
		});
	</script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="simpleDgId" style="height: 300px" />

</body>
</html>